{{ header }} {{ column_left }} {% set module_row = 0 %}

<div id="content">
	
	<div class="page-header">
	  <div class="container-fluid">
		<div class="float-right">
		  <button class="btn btn-primary" title="{{ button_save }}" onclick="$('#form').submit();"><i class="fa fa-save"></i> {{ button_save }}</button>
		  <a class="btn btn-info" title="{{ button_save_edit }}" onclick="$('#save_mode').val('save-edit');$('#form').submit();"><i class="fa fa-save"></i> {{ button_save_edit }}</a>
		  <a class="btn btn-success" title="{{ button_save_new }}" onclick="$('#save_mode').val('save-new');$('#form').submit();"><i class="fa fa-book"></i> {{ button_save_new }}</a> | 
		  <a class="btn btn-danger" title="{{ button_cancel }}" href="{{ cancel }}" ><i class="fa fa-book"></i> {{ button_cancel }}</a> | 
		</div>
		<h1>{{ heading_title }}</h1>
		<ol class="breadcrumb">
		  {% for breadcrumb in breadcrumbs %}
			<li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
		  {% endfor %}
		</ol>
	  </div>
	</div>

	<div id="page-content" class="container-fluid">

		{% if error_warning %}
		  <div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> {{ error_warning }}
			<button type="button" class="close" data-dismiss="alert">&times;</button>
		  </div>
		{% endif %}
	
		<div id="ajaxloading" class="hide">
			<div class="alert alert-warning" role="alert">{{ text_process_request }}</div>
		</div>

		<div class="card">
			<div class="card-header"><i class="fas fa-pencil-alt"></i> {{ heading_title }}</div>
			<div class="card-body">

						<form action="{{ action }}" method="post" enctype="multipart/form-data" id="form">
							<div class="row buttons clearfix">
								<div class="col-lg-4">
								
									<a class="btn btn-primary" title="{{ button_import_categories }}" onclick="$('#save_mode').val('import-categories');$('#form').submit();">{{ button_import_categories }}</a>
									<a class="btn btn-danger" title="{{ button_delete_categories }}" data-toggle="modal" data-target=".deleteTree-modal-sm">{{ button_delete_categories }}</a>
								</div>	
								<div class="col-lg-4">
									<div class="form-group row">
									  <label class="col-sm-6 col-form-label" for="input-status">{{ entry_status }}</label>
									  <div class="col-sm-6">
										<select name="module_megamenu_status" id="input-status" class="form-control">
										  {% if module_megamenu_status %}
											<option value="1" selected="selected">{{ text_enabled }}</option>
											<option value="0">{{ text_disabled }}</option>
										  {% else %}
											<option value="1">{{ text_enabled }}</option>
											<option value="0" selected="selected">{{ text_disabled }}</option>
										  {% endif %}
										</select>
									  </div>
									</div>
								</div>
								<div class="col-lg-4">
									<div class="form-group row">
										<label class="col-sm-6 col-form-label" for="input-stores">{{ entry_filter_store }}</label>
										<div class="col-sm-6">
											<select class="form-control float-right" name="stores" id="stores">
												{% for store in stores %}
												{% if store.store_id == store_id %}
													<option value="{{ store.store_id }}" selected="selected">{{ store.name }}</option>
												{% else %}
													<option value="{{ store.store_id }}">{{ store.name }}</option>
												{% endif %}
												{% endfor %}
											</select>
										</div>
									</div>
							 		
								<input type="hidden" value="{{ store_id }}" name="megamenu[store_id]"/>
								</div>

							</div>

							<div class="megamenu">
								<div class="tree-megamenu">
									<h4>{{ text_treemenu }}</h4>
									<a class="btn btn-success btn-updatetree" name="serialize" id="serialize">{{ button_update_order }}</a>	
									{{ tree }}
									<a class="btn btn-success btn-updatetree" name="serialize" id="serialize">{{ button_update_order }}</a>
								</div>

							</div><!-- end div.megamenu -->

							<div class="megamenu-form">
								<div id="megamenu-form">
									{% include 'extension/module/megamenu/megamenu_form.twig' %}
								</div>
							</div>
							<!-- end div.megamenu-form -->

							<input type="hidden" value="" name="save_mode" id="save_mode"/>
						</form>


			</div>

		</div>

	</div>
</div>

 	<!-- Modal Form-->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	      	<div class="modal-content">
		        <div class="modal-header">
		          	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		          	<h4 class="modal-title">{{ text_preview_on_live_site }}</h4>
		        </div>
	        	<div class="modal-body"></div>
		        <div class="modal-footer">
		          	<button type="button" class="btn btn-default" data-dismiss="modal">{{ text_close }}</button>
		        </div>
	      	</div> 
	    </div> 
	</div>

	<!-- Modal confirm dialog -->
	<div id="cmodal" class="modal fade deleteTree-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
	  	<div class="modal-dialog modal-sm">
		    <div class="modal-content">
		    	<div class="modal-body">
		         	{{ text_message_delete_category }}
		        </div>
		     	<div class="modal-footer">
		          	<button type="button" class="btn btn-default" data-dismiss="modal">{{ text_no }}</button>
		          	<button type="button" class="btn btn-primary" id="btnDeleteTree">{{ text_yes }}</button>
		        </div>
		        <input id="menuid" type="hidden" name="menuid" value="0"/>
		    </div>
	  	</div>
	</div>
  
<script type="text/javascript"><!--
	
	// Drag and Drop menu Item
	$('ol.sortable').nestedSortable({
		forcePlaceholderSize: true,
		handle: 'div',
		helper:	'clone',
		items: 'li',
		opacity: .6,
		placeholder: 'placeholder',
		revert: 250,
		tabSize: 25,
		tolerance: 'pointer',
		toleranceElement: '> div',
		maxLevels: 4,

		isTree: true,
		expandOnHover: 700,
		startCollapsed: true
	});
	
	$('#serialize, .btn-updatetree').click(function(){
			var serialized = $('ol.sortable').nestedSortable('serialize');
			$.ajax({
			async : false,
			type: 'POST',
			dataType:'json',
			url: "{{ updateTree }}",
			data : serialized, 
			success : function (json) { 
		
				$('.alert-dismissible').remove();

				if (json['error']) {
					$('#content > .container-fluid').prepend('<div class="alert alert-danger alert-dismissible"><i class="fas fa-exclamation-circle"></i> ' + json['error'] + '</div>');
				}
				
				if (json['success']) {
					$('#content > .container-fluid').prepend('<div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
					
					$('html, body').animate({ scrollTop: 0 }, 'quick');
					
				}
				
			
			}
		});
	});

	// Mutiple Store
	$('#stores').bind('change', function () {
		url = 'index.php?route=extension/module/megamenu&user_token={{ user_token }}';
		var id = $(this).val();
		if (id) {
			url += '&store_id=' + encodeURIComponent(id);
		}
		window.location = url;
	});

	// Modal delete tree categories
	$('#btnDeleteTree').click(function() {
		var id = $("#menuid").val();
		if(id == 0) {
			$("#save_mode").val('delete-categories');
			$('#form').submit();	
		} else {
			window.location.href="{{ actionDel }}&id="+id;
		}
		
	});

	$(".quickdel").click(function(){
		$('#cmodal .modal-body').html( "{{ text_message_delete }}" );
		$('#cmodal').modal();
		var id = $(this).attr("rel").replace("id_","");
		$("#menuid").val(id);
		return false;
	});


	// Cookies tab
	$('#grouptabs a').click( function(){
		$.cookie("megaactived_tab", $(this).attr("href") );
	});

	if($.cookie("megaactived_tab") !="undefined"){
		$('#grouptabs a').each( function(){
			if( $(this).attr("href") ==  $.cookie("megaactived_tab")){
				$(this).click();
				return ;
			}
		});
	}

	
	
//-->
</script>

{{ footer }}
